<!DOCTYPE html>
<html>
<head>
<style type="text/css">

</style>
<title>svg+canvas+html 转 图片</title>
</head>
<body>

<div id="canvas" class="canvas" style="width: 1000px; height: 2000px; left: -67px; top: -866.5px; overflow: hidden; transform: scale(1);">
				<div id="signPointer"></div>
			<div id="7efab271-2594-4127-8e0e-351c57848f83" class="com" type="echart" comtype="BarChart" _echarts_instance_="ec_1532338980067" tpl="tpls/panel/barChart.html" style="position: absolute; cursor: pointer; z-index: 1; width: 522px; height: 333px; -webkit-tap-highlight-color: transparent; user-select: none; left: 455px; top: 100px;"><div style="position: relative; overflow: hidden; width: 522px; height: 333px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="522" height="333" style="position: absolute; left: 0px; top: 0px; width: 522px; height: 333px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div><div class="com-resize" style="display: none;"><div class="com-right"></div>					   <div class="com-bottom"></div>					   <div class="com-rightBottom"></div></div></div><div id="aaef4364-7c79-4682-8bba-cd3ada917771" class="com" type="echart" comtype="multiBarChart" _echarts_instance_="ec_1532338980068" tpl="tpls/panel/barChart.html" style="position: absolute; cursor: pointer; z-index: 2; width: 917px; height: 358px; -webkit-tap-highlight-color: transparent; user-select: none; left: 33px; top: 646px;"><div style="position: relative; overflow: hidden; width: 917px; height: 358px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="917" height="358" style="position: absolute; left: 0px; top: 0px; width: 917px; height: 358px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 245px; top: 207px;">江苏<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#11ff00;"></span>经度: 120.59<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00f7ff;"></span>纬度: 31.3</div><div class="com-resize" style="display: none;"><div class="com-right"></div>					   <div class="com-bottom"></div>					   <div class="com-rightBottom"></div></div></div><div id="6956c9ca-4c2b-4be9-9692-c63d51c42ea1" class="com" type="component" comtype="Text" tpl="tpls/panel/text.html" style="position: absolute; cursor: pointer; z-index: 3; width: 351px; height: 62px; left: 73px; top: 27px;"><div class="com-content"><div class="com-text" style="display:flex;align-items:center;justify-content:center;color:#0099ff;font-size:36px;">业务图表A</div></div><div class="com-resize" style="display: none;"><div class="com-right"></div>					   <div class="com-bottom"></div>					   <div class="com-rightBottom"></div></div></div><div id="47ab324e-2b43-4ee7-94ac-9f44bf6f0c78" class="com" type="component" comtype="Text" tpl="tpls/panel/text.html" style="position: absolute; cursor: pointer; z-index: 4; width: 333px; height: 67px; left: 319px; top: 551px;"><div class="com-content"><div class="com-text" style="display:flex;align-items:center;justify-content:center;color:#31e67f;font-size:37px;">公司业绩</div></div><div class="com-resize" style="display: none;"><div class="com-right"></div>					   <div class="com-bottom"></div>					   <div class="com-rightBottom"></div></div></div><div id="aef1e402-585d-484d-af46-2e4c677cafc3" class="com" type="component" comtype="Text" tpl="tpls/panel/text.html" style="position: absolute; cursor: pointer; z-index: 5; width: 337px; height: 61px; left: 564px; top: 28px;"><div class="com-content"><div class="com-text" style="display:flex;align-items:center;justify-content:center;color:#0099ff;font-size:36px;">业务图表B</div></div><div class="com-resize" style="display: none;"><div class="com-right"></div>					   <div class="com-bottom"></div>					   <div class="com-rightBottom"></div></div></div><div id="be23b2de-60d5-4120-9abe-7615e109858d" class="com" type="echart" comtype="BarChart" _echarts_instance_="ec_1532338980069" tpl="tpls/panel/barChart.html" style="position: absolute; cursor: pointer; z-index: 6; width: 441px; height: 333px; -webkit-tap-highlight-color: transparent; user-select: none; left: 11px; top: 100px;"><div style="position: relative; overflow: hidden; width: 441px; height: 333px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="441" height="333" style="position: absolute; left: 0px; top: 0px; width: 441px; height: 333px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div><div class="com-resize" style="display: none;"><div class="com-right"></div>					   <div class="com-bottom"></div>					   <div class="com-rightBottom"></div></div></div><div id="739dd082-9ce8-492f-b302-b174ace140ef" class="com" type="component" comtype="Text" tpl="tpls/panel/text.html" style="position: absolute; cursor: pointer; z-index: 7; width: 60px; height: 347px; left: 54px; top: 1231px;"><div class="com-content"><div class="com-text" style="display:flex;align-items:center;justify-content:center;color:#35cca6;font-size:32.5px;">公司业务增长数据</div></div><div class="com-resize" style="display: none;"><div class="com-right"></div>					   <div class="com-bottom"></div>					   <div class="com-rightBottom"></div></div></div><div id="b801c687-b637-4dcf-b4dd-f724488403ba" class="com" type="echart" comtype="multiBarChart" _echarts_instance_="ec_1532338980070" tpl="tpls/panel/barChart.html" style="position: absolute; cursor: pointer; z-index: 8; width: 819px; height: 439px; -webkit-tap-highlight-color: transparent; user-select: none; left: 140px; top: 1171px;"><div style="position: relative; overflow: hidden; width: 819px; height: 439px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="819" height="439" style="position: absolute; left: 0px; top: 0px; width: 819px; height: 439px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 693px; top: 294px;">Sat<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#33dec2;"></span>收入: 330<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#169db5;"></span>支出: 330</div><div class="com-resize" style="display: none;"><div class="com-right"></div>					   <div class="com-bottom"></div>					   <div class="com-rightBottom"></div></div></div><div id="670a3d8a-8c65-4868-b36c-94d797c6badd" class="com" type="component" comtype="Panel" tpl="tpls/panel/panel.html" style="position: absolute; cursor: pointer; z-index: 9; display: block; width: 953px; height: 325px; background-color: rgb(195, 247, 243); border-style: solid; border-width: 1px; border-color: rgb(9, 205, 219); border-radius: 5px; left: 19px; top: 1653px;"><div class="com-content"></div><div class="com-resize" style="display: none;"><div class="com-right"></div>					   <div class="com-bottom"></div>					   <div class="com-rightBottom"></div></div></div><div id="323be0f0-6c94-464c-9262-e6e7ce6fce4a" class="com" type="echart" comtype="BarChart" _echarts_instance_="ec_1532338980071" tpl="tpls/panel/barChart.html" style="position: absolute; cursor: pointer; z-index: 10; width: 300px; height: 260px; -webkit-tap-highlight-color: transparent; user-select: none; left: 39px; top: 1695px;"><div style="position: relative; overflow: hidden; width: 300px; height: 260px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="300" height="260" style="position: absolute; left: 0px; top: 0px; width: 300px; height: 260px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div><div class="com-resize" style="display: none;"><div class="com-right"></div>					   <div class="com-bottom"></div>					   <div class="com-rightBottom"></div></div></div><div id="0f6c40bd-9a2f-487c-be62-6e4f0f898adb" class="com" type="echart" comtype="BarChart" _echarts_instance_="ec_1532338980072" tpl="tpls/panel/barChart.html" style="position: absolute; cursor: pointer; z-index: 11; width: 300px; height: 260px; -webkit-tap-highlight-color: transparent; user-select: none; left: 342px; top: 1693px;"><div style="position: relative; overflow: hidden; width: 300px; height: 260px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="300" height="260" style="position: absolute; left: 0px; top: 0px; width: 300px; height: 260px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div><div class="com-resize" style="display: none;"><div class="com-right"></div>					   <div class="com-bottom"></div>					   <div class="com-rightBottom"></div></div></div><div id="c1f8c626-9f1d-49c3-983f-104c6cdb5a62" class="com" type="echart" comtype="BarChart" _echarts_instance_="ec_1532338980073" tpl="tpls/panel/barChart.html" style="position: absolute; cursor: pointer; z-index: 12; width: 300px; height: 260px; -webkit-tap-highlight-color: transparent; user-select: none; left: 655px; top: 1691px;"><div style="position: relative; overflow: hidden; width: 300px; height: 260px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="300" height="260" style="position: absolute; left: 0px; top: 0px; width: 300px; height: 260px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 141px; top: 148px;">Wed<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#3398DB;"></span>数据: 200</div><div class="com-resize" style="display: none;"><div class="com-right"></div>					   <div class="com-bottom"></div>					   <div class="com-rightBottom"></div></div></div></div>

<!-- 
<div id="canvas" style="width:200px;height: 300px;">
	<div style="position:absolute;left:50px;top:100px;">
		<canvas></canvas>
	</div>
</div>

 -->
<hr>

<div>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" style="border:1px solid #f00;width:200px;height: 300px;">

</svg>
</div>

<img id="result" src=""/>

</body>
</html>
<script type="text/javascript" src="svgConverter.js"></script>
<script type="text/javascript">


var canvas_w,canvas_h,canvas_x,canvas_y;
var canvas = document.getElementsByTagName("canvas")[0]; //foreignObject里的canvas
var ctx = canvas.getContext("2d");
ctx.fillStyle="#00f";
ctx.fillRect(0,0,150,75);

var svgcnt = new svgConverter({
	svgElement:document.getElementById("svg"),
	sourceElement:document.getElementById("canvas"),
	imageElement:document.getElementById("result")
});
</script>